<template>
  <!-- aside -->
  <aside class="aside">
    <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
      <el-menu-item index="1" @mouseenter="handleMouseEnter_detailTags(0)" @mouseleave="handleMouseLeave_detailTags">
        <div class="menu-item">
          <div class="left">
            <el-icon>
              <Grid />
            </el-icon>
            <span>热门分类</span>
          </div>
          <div class="right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item index="2" @mouseenter="handleMouseEnter_detailTags(1)" @mouseleave="handleMouseLeave_detailTags">
        <div class="menu-item">
          <div class="left">
            <el-icon>
              <Monitor />
            </el-icon>
            <span>前端</span>
          </div>
          <div class="right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item index="3" @mouseenter="handleMouseEnter_detailTags(2)" @mouseleave="handleMouseLeave_detailTags">
        <div class="menu-item">
          <div class="left">
            <el-icon>
              <MessageBox />
            </el-icon>
            <span>后端</span>
          </div>
          <div class="right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item index="4" @mouseenter="handleMouseEnter_detailTags(3)" @mouseleave="handleMouseLeave_detailTags">
        <div class="menu-item">
          <div class="left">
            <el-icon>
              <svg-icon name="xiaoCX" />
            </el-icon>
            <span>小程序</span>
          </div>
          <div class="right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-menu-item>
      <el-menu-item index="5" @mouseenter="handleMouseEnter_detailTags(4)" @mouseleave="handleMouseLeave_detailTags">
        <div class="menu-item">
          <div class="left">
            <el-icon>
              <Iphone />
            </el-icon>
            <span>APP</span>
          </div>
          <div class="right">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </el-menu-item>
    </el-menu>

    <div class="detailTags" v-show="notHidden" @mouseenter="handleMouseEnter_detailTags(undefined)"
      @mouseleave="handleMouseLeave_detailTags">
      <div class="detailTags-items">
        <span v-for="(item, index) in detailTagsCurrent" :key="item.id + item.tagName">
          <a href="javascript: void(0)" :class="{ 'strongTag': item.strong === '1' }" @click="handleTagClickEvent(item)">{{ item.tagName }}</a>
        </span>
      </div>
    </div>
  </aside>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue"
import { useRoute, useRouter } from "vue-router"
import {
  Monitor,
  Menu as IconMenu,
  Grid,
  MessageBox,
  ArrowRight,
  Iphone,
} from '@element-plus/icons-vue'
// 路由
const route = useRoute()
const router = useRouter()

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// detailTags
let detailTagsHot = [
  {
    id: '0',
    tagName: '前端',
    hot: '1',
    strong: '1'
  },
  {
    id: '1',
    tagName: 'Vue',
    hot: '1',
    strong: '0'
  },
  {
    id: '2',
    tagName: 'React',
    hot: '1',
    strong: '0'
  },
  {
    id: '3',
    tagName: 'TyperScript',
    hot: '1',
    strong: '0'
  },
  {
    id: '4',
    tagName: '后端',
    hot: '1',
    strong: '1'
  },
  {
    id: '5',
    tagName: 'SpringBoot',
    hot: '1',
    strong: '0'
  },
  {
    id: '6',
    tagName: 'Python',
    hot: '1',
    strong: '0'
  },
  {
    id: '7',
    tagName: '.Net',
    hot: '1',
    strong: '0'
  },
  {
    id: '8',
    tagName: '微信小程序',
    hot: '1',
    strong: '1'
  },
  {
    id: '9',
    tagName: 'WeUI',
    hot: '1',
    strong: '0'
  },
  {
    id: '10',
    tagName: 'App',
    hot: '1',
    strong: '1'
  },
  {
    id: '11',
    tagName: 'ReactNative',
    hot: '1',
    strong: '0'
  },
]
let detailTagsFront = [
  {
    id: '0',
    tagName: '前端',
    hot: '1',
    strong: '1'
  },
  {
    id: '1',
    tagName: 'HTML',
    hot: '1',
    strong: '0'
  },
  {
    id: '2',
    tagName: 'CSS',
    hot: '0',
    strong: '0'
  },
  {
    id: '3',
    tagName: 'JavaScript',
    hot: '1',
    strong: '0'
  },
  {
    id: '4',
    tagName: '框架',
    hot: '1',
    strong: '0'
  },
  {
    id: '5',
    tagName: 'Vue',
    hot: '1',
    strong: '0'
  },
  {
    id: '6',
    tagName: 'React',
    hot: '1',
    strong: '0'
  },
  {
    id: '7',
    tagName: 'Angular',
    hot: '0',
    strong: '0'
  },
  {
    id: '8',
    tagName: 'Webpack',
    hot: '1',
    strong: '1'
  },
  {
    id: '9',
    tagName: 'Vite',
    hot: '0',
    strong: '0'
  },
  {
    id: '10',
    tagName: 'ElementUI',
    hot: '0',
    strong: '0'
  },
  {
    id: '11',
    tagName: 'TypeScript',
    hot: '1',
    strong: '0'
  },
]
let detailTagsBack = [
  {
    id: '0',
    tagName: '后端',
    hot: '1',
    strong: '1'
  },
  {
    id: '1',
    tagName: 'Java',
    hot: '1',
    strong: '0'
  },
  {
    id: '2',
    tagName: 'Python',
    hot: '0',
    strong: '0'
  },
  {
    id: '3',
    tagName: 'Node',
    hot: '1',
    strong: '0'
  },
  {
    id: '4',
    tagName: '框架',
    hot: '1',
    strong: '0'
  },
  {
    id: '5',
    tagName: 'SpringBoot',
    hot: '1',
    strong: '0'
  },
  {
    id: '6',
    tagName: 'Express',
    hot: '1',
    strong: '0'
  },
  {
    id: '7',
    tagName: 'Php',
    hot: '0',
    strong: '0'
  },
  {
    id: '8',
    tagName: 'Go',
    hot: '1',
    strong: '1'
  },
  {
    id: '9',
    tagName: 'MySQL',
    hot: '0',
    strong: '0'
  },
  {
    id: '10',
    tagName: 'Redis',
    hot: '0',
    strong: '0'
  },
  {
    id: '11',
    tagName: 'SQLServer',
    hot: '1',
    strong: '0'
  },
]
let detailTagsMiniApps = [
  {
    id: '0',
    tagName: 'MiniApps',
    hot: '1',
    strong: '1'
  },
  {
    id: '1',
    tagName: '微信小程序',
    hot: '0',
    strong: '0'
  },
  {
    id: '2',
    tagName: 'WeUI',
    hot: '0',
    strong: '0'
  },
  {
    id: '3',
    tagName: 'uView',
    hot: '0',
    strong: '0'
  },
  {
    id: '4',
    tagName: 'AiYunXiaoUI',
    hot: '0',
    strong: '0'
  },
  {
    id: '5',
    tagName: 'OlympusUI',
    hot: '0',
    strong: '0'
  },
  {
    id: '6',
    tagName: 'Lin-UI',
    hot: '0',
    strong: '0'
  },
  {
    id: '7',
    tagName: 'uni-app',
    hot: '0',
    strong: '0'
  },
  {
    id: '8',
    tagName: 'Taro',
    hot: '0',
    strong: '0'
  },
  {
    id: '9',
    tagName: 'mpvue',
    hot: '0',
    strong: '0'
  },
  {
    id: '10',
    tagName: 'WePY',
    hot: '0',
    strong: '0'
  },
  {
    id: '11',
    tagName: 'Tina.js',
    hot: '1',
    strong: '1'
  },
]
let detailTagsApp = [
  {
    id: '0',
    tagName: 'App',
    hot: '1',
    strong: '1'
  },
  {
    id: '1',
    tagName: 'ReactNative',
    hot: '1',
    strong: '0'
  },
  {
    id: '2',
    tagName: 'Flutter',
    hot: '0',
    strong: '0'
  },
  {
    id: '3',
    tagName: 'Ionic',
    hot: '1',
    strong: '0'
  },
  {
    id: '4',
    tagName: 'Xamarin',
    hot: '1',
    strong: '0'
  },
  {
    id: '5',
    tagName: 'Swiftic',
    hot: '1',
    strong: '0'
  },
  {
    id: '6',
    tagName: 'CoronaSDK',
    hot: '1',
    strong: '0'
  },
  {
    id: '7',
    tagName: 'Appcelerator',
    hot: '0',
    strong: '0'
  },
  {
    id: '8',
    tagName: 'NativeScript',
    hot: '1',
    strong: '1'
  },
  {
    id: '9',
    tagName: 'PhoneGap',
    hot: '0',
    strong: '0'
  },
  {
    id: '10',
    tagName: 'IOS',
    hot: '0',
    strong: '0'
  },
  {
    id: '11',
    tagName: 'Android',
    hot: '1',
    strong: '0'
  },
]
let detailTagsAll = [detailTagsHot, detailTagsFront, detailTagsBack, detailTagsMiniApps, detailTagsApp]
const targetIndex = ref(0)
const notHidden = ref(0)
let hiddenTimer: any
const detailTagsCurrent = ref<any[]>([])

const handleMouseEnter_detailTags = (index?: any) => {
  notHidden.value = 1
  if (index !== undefined) {
    targetIndex.value = index;
    detailTagsCurrent.value = detailTagsAll[index];
  }

}

const handleMouseLeave_detailTags = () => {
  notHidden.value = 0;
}

const handleTagClickEvent = (tag: any) => {
  console.log('tag',{...tag});
  router.push({
      path: '/codeTrade',
      query: {
        proTag: tag.tagName,
      }
    })
  // sessionStorage.setItem('proTag',JSON.stringify(tag));
  // clearArrFunc();
}






</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.aside {
  height: 360px;
  position: relative;

  :deep(.el-menu) {
    border: 0;
  }

  :deep(.el-menu-item:first-child) {
    background-color: #03A9F4;
    color: #fff;
    border-radius: 10px
  }

  :deep(.el-menu-item:hover) {
    border-radius: 10px 0 0 10px;
  }

  .menu-item {
    display: flex;
    justify-content: space-between;
    width: 90%;
  }

  .detailTags {
    width: 600px;
    height: 320px;
    position: absolute;
    padding: 20px 50px;
    top: 0;
    left: 100%;
    z-index: 100;
    box-shadow: 5px 5px 10px -4px rgba(0, 0, 0, 0.2);

    background-color: #fff;
    border: 2px solid #03A9F4;
    border-radius: 0 10px 10px 10px;

    &-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 13px 0px;
      width: 100%;
      flex-flow: row wrap;
      /*按照行排列，一行排不下换行。flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/

      span {
        display: block;
        width: 140px;
        /*一行排列4个*/
        height: 50px;
        border-radius: 20px;
        margin-right: 10px;
        margin-bottom: 10px;

        &>a {
          display: block;
          color: #999999;
        }

        &>a:hover {
          display: block;
          color: #ff7f00;
        }
      }

      .strongTag {
        color: #000;
        font-weight: 700;
      }

      span:nth-of-type(4n+0) {
        margin-right: 0px;
      }
    }
  }

}
</style>